<template>
  <div class="container_box">
    <div class="post_box">
      <el-card class="box-card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <a class="btn btn_primary" @click="postDialogFormVisible = true">发帖</a>
            <div class="topicblock">
              <div class="topicblock_container">
                <p class="topicblock_head">推荐话题</p>
                <!-- <router-link to="/communityPostRead"> -->
                  <h2 class="topicblock_body" @click="sendTopicPostData()">{{topicTitle}}</h2>
                <!-- </router-link> -->
                <div class="topicblock_footer">
                  <div class="topicblock_footer_item">浏览人数 137</div>
                  <div class="topicblock_footer_item">参与人数 1</div>
                </div>
              </div>
              <ul>
                <li class="post_item" v-for="(item,i) in postArray" :key="item.id">
                  <router-link to="/communityPostRead">
                    <h2 class="post_title" @click="sendPostData(i)">{{item.title}}</h2>
                  </router-link>
                  <p class="post_desc">
                    <el-tag effect="plain" type="danger" style="margin-right: 10px">简介</el-tag>{{item.briefInfo}}
                  </p>
                  <div class="post_tags_container">
                    <span class="post_tag" v-for="(tagItem) in item.tagArray" :key="tagItem"><span>{{tagItem}}</span></span>
                  </div>
                  <div class="post_info">
                    <div class="post_author_container">
                      <img :src="item.useravatar" alt="" class="post_author_avatar">
                      <p class="post_author_info"><span class="post_author_nickname">{{item.username}}
                          <!----></span></p>
                    </div>
                    <div class="post_time post_info_meta">{{item.create_time | dateFormat}}</div>
                    <div class="post_info_extend">
                      <span class="post_info_meta">
                        <el-badge :value="item.like" class="item" :max="99">
                          <el-button size="small">点赞</el-button>
                        </el-badge>
                      </span>
                      <span class="post_info_meta">
                        <el-badge :value="item.comments.length" class="item" :max="99">
                          <el-button size="small">评论</el-button>
                        </el-badge>
                      </span>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
              </ul>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="乐理" name="second">
            <div class="topicblock">
              <ul v-for="(item,i) in postTheoryArray" :key="item.id">
                <li class="post_item">
                  <router-link to="/communityPostRead">
                    <h2 class="post_title" @click="sendTheoryPostData(i)">{{item.title}}</h2>
                  </router-link>
                  <p class="post_desc">
                    <el-tag effect="plain" type="danger" style="margin-right: 10px">简介</el-tag>{{item.briefInfo}}
                  </p>
                  <div class="post_tags_container">
                    <span class="post_tag" v-for="(tagItem) in item.tagArray" :key="tagItem"><span>{{tagItem}}</span></span>
                  </div>
                  <div class="post_info">
                    <div class="post_author_container">
                      <img :src="item.useravatar" alt="" class="post_author_avatar">
                      <p class="post_author_info"><span class="post_author_nickname">{{item.username}}
                          <!----></span></p>
                    </div>
                    <div class="post_time post_info_meta">{{item.create_time | dateFormat}}</div>
                    <div class="post_info_extend">
                      <span class="post_info_meta">
                        <el-badge :value="item.like" class="item" :max="99">
                          <el-button size="small">点赞</el-button>
                        </el-badge>
                      </span>
                      <span class="post_info_meta">
                        <el-badge :value="item.comments.length" class="item" :max="99">
                          <el-button size="small">评论</el-button>
                        </el-badge>
                      </span>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
              </ul>
              <el-pagination @size-change="handleTheorySizeChange" @current-change="handleTheoryCurrentChange" :current-page="queryTheoryinfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="Theorytotal">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="视唱练耳" name="third">
            <div class="topicblock">
              <ul v-for="(item,i) in postSeeArray" :key="item.id">
                <li class="post_item">
                  <router-link to="/communityPostRead">
                    <h2 class="post_title" @click="sendSeePostData(i)">{{item.title}}</h2>
                  </router-link>
                  <p class="post_desc">
                    <el-tag effect="plain" type="danger" style="margin-right: 10px">简介</el-tag>{{item.briefInfo}}
                  </p>
                  <div class="post_tags_container">
                    <span class="post_tag" v-for="(tagItem) in item.tagArray" :key="tagItem"><span>{{tagItem}}</span></span>
                  </div>
                  <div class="post_info">
                    <div class="post_author_container">
                      <img :src="item.useravatar" alt="" class="post_author_avatar">
                      <p class="post_author_info"><span class="post_author_nickname">{{item.username}}
                          <!----></span></p>
                    </div>
                    <div class="post_time post_info_meta">{{item.create_time | dateFormat}}</div>
                    <div class="post_info_extend">
                      <span class="post_info_meta">
                        <el-badge :value="item.like" class="item" :max="99">
                          <el-button size="small">点赞</el-button>
                        </el-badge>
                      </span>
                      <span class="post_info_meta">
                        <el-badge :value="item.comments.length" class="item" :max="99">
                          <el-button size="small">评论</el-button>
                        </el-badge>
                      </span>
                    </div>
                  </div>
                </li>
                <el-divider></el-divider>
              </ul>
              <el-pagination @size-change="handleSeeSizeChange" @current-change="handleSeeCurrentChange" :current-page="querySeeinfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="Seetotal">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 发帖对话框 -->
      <el-dialog title="发帖" :visible.sync="postDialogFormVisible" :before-close="handleDialogClose" @close="resetForm()">
        <!-- 内容区域 -->
        <el-form :model="postform" ref="postformRef">
          <el-form-item label="标题:" :label-width="formLabelWidth">
            <el-input v-model="postform.title"></el-input>
          </el-form-item>
          <el-form-item label="简介:" :label-width="formLabelWidth">
            <el-input v-model="postform.briefInfo"></el-input>
          </el-form-item>
          <el-form-item label="详情:" :label-width="formLabelWidth">
            <quill-editor v-model="postform.content" :options="editorOption" ref="myQuillEditor">
            </quill-editor>
          </el-form-item>
          <el-form-item label="* 标签:" :label-width="formLabelWidth">
            <el-tag closable v-for="tag in postform.tagArray" :key="tag" @close="handleTagClose(tag)" type="success" effect="dark" style="margin-right: 15px">{{tag}}</el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm()">重置</el-button>
          <el-button @click="postDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="post_box_others">
      <div class="post_box_others_list">
        <p class="require_button"><span class="btn btn_primary" @click="requireMessage()">需求反馈</span></p>
        <div class="require_list_box" v-for="item in requireArray" :key="item.id">
          <div class="require_list_item">
            <span class="require_list_item_title">{{item.reqContent}}</span>
            <p style="margin: 0;text-align: left;margin-top: -26px;">
              <span class="require_list_item_extend">
                <i class="require_list_item_type">开发中</i>
                {{item.create_time | dateFormat}}
              </span>
            </p>
          </div>
        </div>
        <el-pagination style="margin-top: 30px" @current-change="handleRequireCurrentChange" :page-sizes="[5]" :page-size="5" layout="total, prev, next, sizes" :total="requiretotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
// 富文本编辑器扩展模块
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import imageResize from 'quill-image-resize-module'

Quill.register('modules/ImageExtend', ImageExtend)
// use resize module
Quill.register('modules/imageResize', imageResize)
export default {
  data() {
    return {
      topicTitle: '「网站应该补充哪一些内容」?',
      requiretotal: 0,
      components: { quillEditor },
      activeName: 'first',
      postDialogFormVisible: false,
      inputVisible: false,
      inputValue: '',
      formLabelWidth: '120px',
      requireArray: [],
      postform: {
        title: '',
        briefInfo: '',
        content: '',
        tagArray: ['乐理', '视唱练耳']
      },
      queryinfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      queryTheoryinfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      querySeeinfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      queryRequireinfo: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      Theorytotal: 0,
      Seetotal: 0,
      postArray: [],
      postTheoryArray: [],
      postSeeArray: [],
      // 富文本框参数设置
      editorOption: {
        modules: {
          imageResize: { // 配置图片可缩放大小
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          ImageExtend: { // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
            loading: true,
            name: 'file',
            size: 2, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: 'http://localhost:3000/community/posting/uploadImg',
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            response: (res) => {
              return res.result.imageUrl
            },
            headers: (xhr) => {
              // xhr.setRequestHeader('myHeader','myValue')
            }, // 可选参数 设置请求头部
            sizeError: () => {}, // 图片超过大小的回调
            start: () => {}, // 可选参数 自定义开始上传触发事件
            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {}, // 可选参数 上传失败触发的事件
            success: () => {}, // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {
              // xhr.setRequestHeader('myHeader','myValue')
              // formData.append('token', 'myToken')
            } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: { // 如果不上传图片到服务器，不必配置
            container: container, // container为工具栏，此次引入全部工具栏
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  },
  created() {
    this.getPostlist()
    this.getRequirelist()
  },
  methods: {
    requireMessage() {
      this.$prompt('请输入反馈', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        if (value === null) {
          this.$message({
            type: 'error',
            message: '反馈信息不能为空'
          })
        } else {
          const postform = { content: value }
          const ret = await this.$http.post('/community/require', postform)
          console.log(ret.data)
          if (ret.data.err_code !== 0) {
            this.$message({
              message: '反馈失败',
              type: 'error'
            })
          }
          this.getRequirelist()
          this.$message({
            type: 'success',
            message: '反馈会被筛选过后公示'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 获取反馈信息
    async getRequirelist() {
      const ret = await this.$http.get('/community/getrequire', { params: this.queryRequireinfo })
      if (ret.data.err_code !== 0) {
        console.log('获取反馈信息失败')
      }
      console.log(ret.data)
      this.requireArray = ret.data.data
      this.requiretotal = ret.data.total
    },
    sendTopicPostData() {
      const h = this.$createElement
      this.$notify({
        title: '话题功能模块',
        message: h('i', { style: 'color: teal' }, '还没完善功能,见谅！')
      })
    },
    sendPostData(i) {
      this.$store.commit({
        type: 'sendPostData',
        PostData: this.postArray[i]
      })
    },
    sendTheoryPostData(i) {
      this.$store.commit({
        type: 'sendPostData',
        PostData: this.postTheoryArray[i]
      })
    },
    sendSeePostData(i) {
      this.$store.commit({
        type: 'sendPostData',
        PostData: this.postSeeArray[i]
      })
    },
    handleClick(tab, event) {
      if (tab.index === '1') {
        this.getTheoryPostlist()
      } else if (tab.index === '0') {
        this.getPostlist()
      } else if (tab.index === '2') {
        this.getSeePostlist()
      }
    },
    handleDialogClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleTagClose(tag) {
      this.postform.tagArray.splice(this.postform.tagArray.indexOf(tag), 1)
    },
    // 提交发帖表单数据
    async submitForm() {
      console.log(this.postform)
      const ret = await this.$http.post('/community/posting', this.postform)
      console.log(ret.data)
      if (ret.data.err_code !== 0) {
        this.$message({
          message: '发帖失败',
          type: 'error'
        })
      }
      this.getPostlist()
      this.$message({
        message: '发帖成功',
        type: 'success'
      })
      this.resetForm()
      this.postDialogFormVisible = false
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 确定标签输入框的内容
    handleInputConfirm() {
      const repeatTag = this.postform.tagArray.some(item => {
        return item === this.inputValue.trim()
      })
      if (this.inputValue.trim().length === 0 || repeatTag === true) {
        this.inputVisible = false
        this.inputValue = ''
      } else {
        this.postform.tagArray.push(this.inputValue.trim())
      }
    },
    // 重置表单
    resetForm() {
      this.$nextTick(_ => {
        this.$refs.postformRef.resetFields()
      })
    },
    // 获取全部的帖子
    async getPostlist() {
      const ret = await this.$http.get('/community/getPostlist', { params: this.queryinfo })
      if (ret.data.err_code !== 0) {
        console.log('获取帖子失败')
      }
      console.log(ret.data)
      this.total = ret.data.total
      this.postArray = ret.data.data
    },
    // 获取乐理标签的帖子
    async getTheoryPostlist() {
      this.queryTheoryinfo.query = '乐理'
      const ret = await this.$http.get('/community/getPostlist', { params: this.queryTheoryinfo })
      if (ret.data.err_code !== 0) {
        console.log('获取帖子失败')
      }
      console.log(ret.data)
      this.Theorytotal = ret.data.total
      this.postTheoryArray = ret.data.data
    },
    // 获取视唱练耳标签的帖子
    async getSeePostlist() {
      this.querySeeinfo.query = '视唱练耳'
      const ret = await this.$http.get('/community/getPostlist', { params: this.querySeeinfo })
      if (ret.data.err_code !== 0) {
        console.log('获取帖子失败')
      }
      console.log(ret.data)
      this.Seetotal = ret.data.total
      this.postSeeArray = ret.data.data
    },
    // 处理全部分区页面数据展示条数的改变
    handleSizeChange(newpagesize) {
      this.queryinfo.pageSize = newpagesize
      this.getPostlist()
    },
    // 处理全部分区当前页的改变
    handleCurrentChange(newpagenum) {
      this.queryinfo.pageNum = newpagenum
      this.getPostlist()
    },
    // 处理乐理分区页面数据展示条数的改变
    handleTheorySizeChange(newpagesize) {
      this.queryTheoryinfo.pageSize = newpagesize
      this.getTheoryPostlist()
    },
    // 处理乐理分区当前页的改变
    handleTheoryCurrentChange(newpagenum) {
      this.queryTheoryinfo.pageNum = newpagenum
      this.getTheoryPostlist()
    },
    // 处理视唱练耳分区页面数据展示条数的改变
    handleSeeSizeChange(newpagesize) {
      this.querySeeinfo.pageSize = newpagesize
      this.getSeePostlist()
    },
    // 处理视唱练耳分区当前页的改变
    handleSeeCurrentChange(newpagenum) {
      this.querySeeinfo.pageNum = newpagenum
      this.getSeePostlist()
    },
    // 处理反馈当前页的改变
    handleRequireCurrentChange(newpagenum) {
      this.queryRequireinfo.pageNum = newpagenum
      this.getRequirelist()
    }
  }
}

</script>
<style scoped>
.require_button {
  margin: 0;
}

.require_list_item_type:after {
  content: " ";
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
  margin: 0 5px;
  position: relative;
  top: -3px;
}

.require_list_item_extend {
  color: rgba(0, 0, 0, .5);
  font-size: 12px;
  cursor: default;
}

.require_list_item_title {
  color: rgba(0, 0, 0, .9);
  display: block;
  width: auto;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
  text-align: left;
}

.require_list_item {
  padding: 4.5px 0;
  margin-bottom: -26px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.container_box {
  width: 80%;
  margin: 0 auto;
  height: 100vh;
}

.post_box {
  width: calc(100% - 320px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  border-radius: 4px;
  margin-bottom: 16px;
  height: 400px;
  margin-top: 5px
}

.post_box_others_list {
  background-color: #fff;
  width: 300px;
  height: 450px;
  margin-bottom: 16px;
  border-radius: 4px;
  border-top: 1px solid #07c160;
  padding: 22px 21px 20px;
  box-sizing: border-box;
}

.post_box_others {
  display: inline-block;
  margin-left: 20px;
  margin-top: 5px;
  width: 300px;
}

.post_tag {
  padding: 0 8px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, .5);
  vertical-align: top;
  line-height: 20px;
  height: 20px;
  margin-right: 4px;
  border-radius: 2px;
  font-size: 12px;
  display: inline-block;
  cursor: default;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ededed;
}

.post_tags_container {
  margin-top: 8px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.el-form-item {
  margin-top: 15px
}

.el-main[data-v-fae5bece] {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 10px;
  height: 100%;
}

.post_title {
  font-weight: 400;
  display: block;
  font-size: 20px;
  line-height: 1.25;
  cursor: pointer;
  color: rgba(0, 0, 0, .9);
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 24px;
}

.post_author_container {
  display: inline-block;
}

.post_author_nickname {
  color: #576b95;
}

.post_author_avatar {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  vertical-align: middle;
}

.post_author_info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

.post_time {
  margin-left: 14px;
  line-height: 23.3px;
}

.post_info_meta {
  display: inline-block;
  font-weight: 400;
  font-style: normal;
  margin-right: 14px;
  font-size: 14px;
  color: rgba(0, 0, 0, .3);
}

.post_time.post_info_meta {
  margin-left: 14px;
  line-height: 23.3px;
}

.post_info .post_info_extend {
  float: right;
}

.post_info {
  *zoom: 1;
  margin: 0 5px 0 0;
  color: rgba(0, 0, 0, .5);
  font-size: 14px;
}

.post_desc {
  color: rgba(0, 0, 0, .5);
  margin: 8px 0 5px;
  overflow: hidden;
  word-break: break-all;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post_item {
  position: relative;
  padding: 14px 0 15px;
}

ul {
  padding-left: 0;
  list-style-type: none;
}

.topicblock_container {
  /*background: #f6f6f6 url(https://res.wx.qq.com/community/dist/images/topic_homepage_bg_ac34e7.png) no-repeat 100% 100%;*/
  background: #f6f6f6;
  background-size: 525px 94px;
  border-radius: 4px;
  padding: 22px 24px;
  margin-bottom: 16px;
  margin-top: 17px;
}

.topicblock_container .topicblock_head {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #1485ee;
}

.topicblock_container .topicblock_body {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, .9);
  cursor: pointer;
}

.topicblock_container .topicblock_footer {
  margin-top: 22px;
}

.topicblock_container .topicblock_footer_item {
  display: inline-block;
  margin-right: 25px;
  color: rgba(0, 0, 0, .5);
}

.btn {
  min-width: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 22px;
}

.btn {
  display: inline-block;
  overflow: visible;
  padding: 0 22px;
  height: 30px;
  line-height: 28px;
  *line-height: 28px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
}

.btn_primary {
  background-color: #07c160;
  color: #fff;
  border: none;
  font-weight: 500;
  background: #07c160;
}

.btn_primary:hover {
  background-color: #1fa25e
}

</style>
